<script setup lang="ts">
// import { fileGetName } from '@/api/file'
import { downloadFile } from '@/utils/download'
import { getFileSuffix, getFileType, onlinePreview } from '@/utils/util'

withDefaults(defineProps<{
    files: string[]
    width: string
    height: string
}>(),{
    files:()=>[],
    width:'50px',
    height: '50px'
})

const visible = ref(false)
const url = ref('')

const showIndex = ref(-1)

const handlePreview = (row: any) => {
  url.value = row.path
  visible.value = true
}

const names = ref<any>([])

const handleMouseover = async (item: any, i: number) => {
  // if (!names.value[i]) {
  //   const res = await fileGetName({
  //     uri: item
  //   })
  //   names.value[i] = res.name
  // }
  showIndex.value = i
}

const handleMouseout = () => {
  showIndex.value = -1
}
</script>

<template>
  <div class="flex items-center w-[max-content]">
    <div
      @mouseover="handleMouseover(item, i)"
      @mouseout="handleMouseout"
      class="overflow-hidden mr-[10px] mb-[10px] rounded-[4px]"
      v-for="(item, i) in files"
      :style="{
        width: width,
        height: height
      }"
      :key="i"
    >
      <el-tooltip :hide-after="0" :content="names[showIndex]" placement="top">
        <div class="relative item-file" v-if="getFileType(item) === 'image'">
          <div
            v-show="showIndex == i"
            class="mask absolute top-0 left-0 z-10 w-[100%] h-[100%] flex items-center justify-center"
          >
            <el-tooltip content="查看" placement="top">
              <el-icon class="cursor-pointer" color="#fff" size="16px" @click="onlinePreview(item)"
                ><View
              /></el-icon>
            </el-tooltip>
            <div class="w-[5px]"></div>
            <el-tooltip content="下载" placement="top">
              <el-icon
                class="cursor-pointer"
                color="#fff"
                size="16px"
                @mouseover="handleMouseover(item, i)"
                @click="downloadFile(item)"
                ><Download
              /></el-icon>
            </el-tooltip>
          </div>
          <el-image
            :style="{
              width: width,
              height: height
            }"
            :src="item"
            fit="cover"
          />
        </div>
        <div
          class="cursor-pointer"
          v-else-if="getFileType(item) === 'video'"
          @click="handlePreview(item)"
        >
          <video
            :style="{
              width: width,
              height: height
            }"
            :src="item"
          />

          <el-dialog v-model="visible" width="740px" title="视频预览">
            <video-player ref="playerRef" :src="url" width="100%" height="450px" />
          </el-dialog>
        </div>
        <div
          :style="{
            width: width,
            height: height
          }"
          @mouseover="handleMouseover(item, i)"
          @mouseout="handleMouseout"
          class="bg-[#FBF8F8] relative rounded-[8px] cursor-pointer flex justify-center items-center mr-[10px] mb-[10px] item-file"
          v-else
        >
          <div
            v-show="showIndex == i"
            class="mask absolute top-0 left-0 w-[100%] h-[100%] flex items-center justify-center"
          >
            <el-tooltip content="查看" placement="top">
              <el-icon class="cursor-pointer" color="#fff" size="16px" @click="onlinePreview(item)"
                ><View
              /></el-icon>
            </el-tooltip>
            <div class="w-[5px]"></div>
            <el-tooltip content="下载" placement="top">
              <el-icon class="cursor-pointer" color="#fff" size="16px" @click="downloadFile(item)"
                ><Download
              /></el-icon>
            </el-tooltip>
          </div>
          <img
            v-if="['xlsx', 'xls'].includes(getFileSuffix(item))"
            class="w-[90%] h-[90%]"
            src="@/assets/images/ic_excel@2x.png"
          />
          <img
            v-else-if="['pdf'].includes(getFileSuffix(item))"
            class="w-[90%] h-[90%]"
            src="@/assets/images/ic_pdf@2x.png"
          />
          <img
            v-else-if="['ppt'].includes(getFileSuffix(item))"
            class="w-[90%] h-[90%]"
            src="@/assets/images/ic_ppt@2x.png"
          />
          <img
            v-else-if="['docx', 'doc'].includes(getFileSuffix(item))"
            class="w-[90%] h-[90%]"
            src="@/assets/images/ic_word@2x.png"
          />
          <div v-else class="text-[20px] text-[#fff] font-medium">{{ getFileSuffix(item) }}</div>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<style scoped lang="scss">
.mask {
  background: rgba(0, 0, 0, 0.5);
}
</style>
